<template>
  <view class="content">
    <view class="title">注销账号</view>
    <view class="description">
      注销账号后，您的所有数据将被永久删除且无法恢复。请谨慎操作。
		注销协议注销协议注销协议注销协议注销协议注销
		注销协议注销协议注销协议注销协议注销协议注销
		注销协议注销协议注销协议
		注销协议注销协议注销协议注销协议注销协议注销
		注销协议注销协议注销协议注销协议注销协议注销
		注销协议注销协议注销协议
		注销协议注销协议注销协议注销协议注销协议注销
		注销协议注销协议注销协议注销协议注销协议注销
		注销协议注销协议注销协议
		注销协议注销协议注销协议注销协议注销协议注销
		注销协议注销协议注销协议注销协议注销协议注销
		注销协议注销协议注销协议
    </view>   
	
	<text class="agreement-text">
	  详细内容请阅读
	  <text class="link" @tap="gotoAgreement">(注销协议)</text>
	</text>
    <view class="confirm">
      <button class="button" @click="confirmDeletion">已慎重考虑，确认注销</button>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    confirmDeletion() {
      uni.showModal({
        title: '提示',
        content: '您确定要注销账号吗？此操作不可恢复。',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '账号已注销',
              icon: 'none'
            });
            // 这里可以添加实际的注销逻辑，例如调用 API
          }
        }
      });
    }
  }
};
</script>

<style>
.content {
	background-color: #fdfdfd;
  font-family: Arial, sans-serif;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.description {
  font-size: 15px;
  margin-bottom: 20px;
  color: #282828;
}

.agreement-text {
	  width: 300px;
	  height: 34px;
	  font-family: PingFang SC;
	  font-weight: 400;
	  font-size: 12px;
	  line-height: 16.8px;
	  letter-spacing: 0px;
	  color: #999;
	  margin-left: 5rpx;
	}

	.link {
	  color: #0822cc;
	}


.confirm {
  text-align: center;
  margin-top: 20px;
}

.button {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 32px;
	font-size: 32rpx;
	color: #5B5B5B;
	text-align: center;
	pointer-events: auto; /* 确保用户交互正常 */
}

.button::after{
	border: none;
}

</style>